<script setup>
import {ref} from 'vue'
import { getLimitList } from '@/api/self'

// 弹出框
import { showDialog } from 'vant';

const value = ref('')
const goodsList = ref([])
const nameList = ref([])
getLimitList().then(res =>{
  // console.log(res.data);
  goodsList.value = res.data.goods
  // console.log( goodsList.value);
  nameList.value = res.data.list

  // console.log( nameList.value);

})
</script>
<template>
  <div class="box">
    <van-nav-bar title="钱包页" left-text="返回" left-arrow @click-left="$router.back()"></van-nav-bar>
    <template v-if="nameList[1]">
        <van-cell title="主题币" :value="nameList[1].coins"  />
        <van-cell title="使用情况" :value="nameList[1].limitNum" size="large"  />
    </template>
  
    <!-- 积分兑换宫格 -->
    <div class="coin">
      <h3>积分兑兑乐</h3>
      <van-grid :column-num="3" icon-size="60">
    <van-grid-item v-for="value in goodsList"  :key="value.img" :icon="value.img" :text="value.coinsPay" >
      <template #text>
          <p class="first">{{ value.coinsPay }}</p>
          <p class="second">{{ value.name }}</p>
      </template>
    </van-grid-item>
  </van-grid>
  
  <!-- 弹出框 -->
  <!-- 我的咖积分 -->
  <p class="coin1"><span>我的咖积分 <em>1200</em></span><span @click="$router.push('/draw')" @confirm="">幸运抽奖</span></p>
    </div>
    
  </div>
  </template>
 
<style lang="scss" scoped>
  .box{
    h3{
      margin: .2rem .1rem;
      text-align: center;
    }
    .coin{
      text-align: center;
      font-size: 12px;
      .first{
        color: orange;
      }
     .dialog{
      width: 100px;
      height: 100px;
      img{
         width: 100px;
      }

      }
      .coin1{
        height: 50px;
        line-height: 50px;
        background-color: orange;
        display: flex;
        justify-content: space-around;
        em{
          color: rgb(43, 226, 141);
        }
      }
    }
  }
  .van-cell{
    height: 200px;
  }
</style>